<template>
  <div>
    <cinema-top-info :cinema-info="cinemaInfo"/>
    <sn-three-col-space>
      <div slot="spaceContent">
        <!-- 面包屑导航-->
        <cinema-brand-nav
            :cinema-name="cinemaInfo.cinemaName"
            class="cinema-brand-nav"/>
        <!-- 所有可以选择的电影-->
        <cinema-show-movies
            v-if="posters.length > 0"
            @chooseMovie="toChooseMovie"
            :posters="posters"
            ref="cinemaShowMovies"/>
        <!-- 电影基本信息-->
        <choose-movie-info
            v-if="movieInfos.length > 0"
            :movie-info="movieInfos[movieInfoIndex]"
            ref="movieInfo"/>
        <el-divider/>
        <!-- 电影排片信息-->
        <cinema-schedule
            :today-data="today"
            :tomorrow-data="tomorrow"
            :the-day-after-tomorrow-data="theDayAfterTomorrow"
            :button-names="buttonNames"
            @toChooseTodaySeat="toChooseTodaySeat"
            @toChooseTomorrowSeat="toChooseTomorrowSeat"
            @toChooseTheDayAfterTomorrowSeat="toChooseTheDayAfterTomorrowSeat"/>
      </div>
    </sn-three-col-space>
  </div>
</template>

<script>
import CinemaTopInfo from "@/views/cinema/cinema_info/top_info/CinemaTopInfo";
import CinemaBrandNav from "@/views/cinema/cinema_info/cinema_nav/CinemaBrandNav";
import CinemaShowMovies from "@/views/cinema/cinema_info/cinema_show_movie/CinemaShowMovies";
import ChooseMovieInfo from "@/views/cinema/cinema_info/choose_movie_info/ChooseMovieInfo";
import CinemaSchedule from "@/views/cinema/cinema_info/cinema_schedule/CinemaSchedule";
import store from '@/store/index'
import * as mutationsTypes from '@/store/mutations-types'

export default {
  name: "CinemaInfo",
  components: {
    CinemaTopInfo,
    CinemaBrandNav,
    CinemaShowMovies,
    ChooseMovieInfo,
    CinemaSchedule,
  },
  data() {
    return {
      //1.影院基本信息
      cinemaInfo: {
        // cinemaId: 0,
        // cinemaName: '星美国际影商城（环球IMAX店）',
        // address: '地址：武侯区锦城大道666号奥克斯广场东区4层',
        // poster: 'https://p1.meituan.net/deal/201208/22/1_0822151022.jpg@292w_292h_1e_1c',
        // telephone: '电话：028-86586269',
        // service: [
        //   {
        //     name: '改签',
        //     description: '未取票用户放映前60分钟可改签'
        //   },
        //   {
        //     name: '儿童优惠',
        //     description: '1.3米以下小朋友可享受无座免票'
        //   },
        //   {
        //     name: '停车场',
        //     description: '目前免费，详请现场咨询影城'
        //   },
        //   {
        //     name: '3D眼镜',
        //     description: '免押金'
        //   },
        // ]
      },
      //2.上映的电影的海报信息
      posters: [],
      //3.所选中的电影的基本信息
      movieInfos: [],
      //3.1当前选择的是哪一部电影
      movieInfoIndex: -1,
      //4.拍片数据
      //4.1 今天的数据
      today: [],
      //4.2 明天的数据
      tomorrow: [],
      //4.3 后天的数据
      theDayAfterTomorrow: [],
      //5.选择购买哪一天的场次的按钮名称
      buttonNames: [],
    }
  },
  beforeRouteEnter(to, from, next) {
    if (to.params.cinemaId !== undefined) {
      store.commit(mutationsTypes.EXCHANGE_CINEMA_ID, to.params.cinemaId)
    }
    next()
  },
  created() {
    this.getCinemaInfo()
  },
  methods: {
    //选择电影
    toChooseMovie(movieId) {
      let cinemaId = store.getters.getCinemaId
      let movieInfos = this.movieInfos
      for (let i = 0; i < movieInfos.length; i++) {
        if (movieInfos[i].movieId === movieId) {
          this.movieInfoIndex = i
        }
      }
      //向后端发送请求获取选择的电影信息
      this.$http({
        url: `/web/cinema/info/getMovieSchedule/${cinemaId}/${movieId}`,
        method: 'get'
      }).then(({data}) => {
        //4.获取排片数据
        let {cinemaId, scheduleMovieInfo} = data.data
        let {movieId, movieScheduleRecords} = scheduleMovieInfo

        let todayRecords = movieScheduleRecords[0]
        let tomorrowRecords = movieScheduleRecords[1]
        let theDayAfterTomorrowRecords = movieScheduleRecords[2]

        //初始化今天 明天 后天 的所有排片数据
        this.today = []
        this.tomorrow = []
        this.theDayAfterTomorrow = []

        //今天
        let todayMovieShowDate = todayRecords.movieShowDate
        let todayDateString = todayRecords.dateString
        let todayScheduleRecordContents = todayRecords.scheduleRecordContents
        if (todayScheduleRecordContents.length > 0) {
          for (let i = 0; i < todayScheduleRecordContents.length; i++) {
            this.today.push(todayScheduleRecordContents[i])
          }
        }

        //明天
        let tomorrowMovieShowDate = tomorrowRecords.movieShowDate
        let tomorrowDateString = tomorrowRecords.dateString
        let tomorrowScheduleRecordContents = tomorrowRecords.scheduleRecordContents
        if (tomorrowScheduleRecordContents.length > 0) {
          for (let i = 0; i < tomorrowScheduleRecordContents.length; i++) {
            this.tomorrow.push(tomorrowScheduleRecordContents[i])
          }
        }

        //后天
        let theDayAfterTomorrowMovieShowDate = theDayAfterTomorrowRecords.movieShowDate
        let theDayAfterTomorrowDateString = theDayAfterTomorrowRecords.dateString
        let theDayAfterTomorrowScheduleRecordContents = theDayAfterTomorrowRecords.scheduleRecordContents
        if (theDayAfterTomorrowScheduleRecordContents.length > 0) {
          for (let i = 0; i < theDayAfterTomorrowScheduleRecordContents.length; i++) {
            this.theDayAfterTomorrow.push(theDayAfterTomorrowScheduleRecordContents[i])
          }
        }
        //5.获取选择购买哪一天的场次的按钮名称
        this.buttonNames.push('今天 ' + todayDateString, '明天 ' + tomorrowDateString, '后天 ' + theDayAfterTomorrowDateString)
      })
    },
    //向后端发送请求获取影院信息 和电影信息
    getCinemaInfo() {
      let cinemaId = store.getters.getCinemaId
      this.$http({
        url: `/web/cinema/info/detail/${cinemaId}`,
        method: 'get'
      }).then(({data}) => {
        //1.对象解构
        let {
          cinemaAddress,
          cinemaId,
          cinemaImage,
          cinemaName,
          cinemaPhone,
          cinemaServices,
          scheduleMovieInfos
        } = data.data
        //2.获取影院的基本信息
        this.$set(this.cinemaInfo, 'cinemaId', cinemaId)
        this.$set(this.cinemaInfo, 'cinemaName', cinemaName)
        this.$set(this.cinemaInfo, 'address', cinemaAddress)
        this.$set(this.cinemaInfo, 'poster', cinemaImage)
        this.$set(this.cinemaInfo, 'telephone', cinemaPhone)
        this.$set(this.cinemaInfo, 'service', cinemaServices)
        //3.获取所有的电影海报 和电影的基本信息
        for (let i = 0; i < scheduleMovieInfos.length; i++) {
          let {
            movieId,
            movieName,
            movieTypes,
            poster,
            score,
            time,
            movieActors
          } = scheduleMovieInfos[i]
          //3.1 获取简单的电影海报和电影id信息
          let movieSimpleInfo = {
            movieId,
            poster,
          }
          this.posters.push(movieSimpleInfo)
          //3.2 获取电影的详细基本信息
          //获取演员
          let actors = []
          for (let j = 0; j < movieActors.length; j++) {
            actors.push(movieActors[j].name)
          }
          let movieInfo = {
            movieId,
            movieName,
            score,
            time,
            movieTypes,
            movieActors: actors
          }
          this.movieInfos.push(movieInfo)
        }
      })
    },
    //选座购票
    toChooseTodaySeat(info) {
      //1.获取海报
      //1.1获取展示电影的子组件
      let cinemaShowMoviesComponent = this.$refs.cinemaShowMovies
      //1.2获取当前选择的电影 在数组中的索引
      let activeId = cinemaShowMoviesComponent.activeId
      //1.3获取当前选择的电影的海报
      let poster = cinemaShowMoviesComponent.posters[activeId]

      //2.获取基本的电影信息
      //2.1获取电影信息的子组件
      let movieInfoComponent = this.$refs.movieInfo
      //2.2获取电影基本信息
      let movieInfo = movieInfoComponent.movieInfo

      //3.获取影院基本信息
      let cinemaInfo = this.cinemaInfo

      //4.获取场次信息
      let fieldInfo = info
      //5.封装所有信息
      let chooseSeatPageData = {
        poster,
        movieInfo,
        cinemaInfo,
        fieldInfo
      }
      //6.初始化vuex中数据
      this.$store.commit(this.mutationsTypes.EXCHANGE_CHOOSE_SEAT_PAGE_DATA, {})
      //7.保存到vuex中
      this.$store.commit(this.mutationsTypes.EXCHANGE_CHOOSE_SEAT_PAGE_DATA, chooseSeatPageData)
      //8.路由跳转
      this.$router.push({
        name: 'chooseSeat'
      })
    },
    toChooseTomorrowSeat(info) {
      //1.获取海报
      //1.1获取展示电影的子组件
      let cinemaShowMoviesComponent = this.$refs.cinemaShowMovies
      //1.2获取当前选择的电影 在数组中的索引
      let activeId = cinemaShowMoviesComponent.activeId
      //1.3获取当前选择的电影的海报
      let poster = cinemaShowMoviesComponent.posters[activeId]

      //2.获取基本的电影信息
      //2.1获取电影信息的子组件
      let movieInfoComponent = this.$refs.movieInfo
      //2.2获取电影基本信息
      let movieInfo = movieInfoComponent.movieInfo

      //3.获取影院基本信息
      let cinemaInfo = this.cinemaInfo

      //4.获取场次信息
      let fieldInfo = info
      //5.封装所有信息
      let chooseSeatPageData = {
        poster,
        movieInfo,
        cinemaInfo,
        fieldInfo
      }
      //6.初始化vuex中数据
      this.$store.commit(this.mutationsTypes.EXCHANGE_CHOOSE_SEAT_PAGE_DATA, {})
      //7.保存到vuex中
      this.$store.commit(this.mutationsTypes.EXCHANGE_CHOOSE_SEAT_PAGE_DATA, chooseSeatPageData)
      //8.路由跳转
      this.$router.push({
        name: 'chooseSeat'
      })
    },
    toChooseTheDayAfterTomorrowSeat(info) {
//1.获取海报
      //1.1获取展示电影的子组件
      let cinemaShowMoviesComponent = this.$refs.cinemaShowMovies
      //1.2获取当前选择的电影 在数组中的索引
      let activeId = cinemaShowMoviesComponent.activeId
      //1.3获取当前选择的电影的海报
      let poster = cinemaShowMoviesComponent.posters[activeId]

      //2.获取基本的电影信息
      //2.1获取电影信息的子组件
      let movieInfoComponent = this.$refs.movieInfo
      //2.2获取电影基本信息
      let movieInfo = movieInfoComponent.movieInfo

      //3.获取影院基本信息
      let cinemaInfo = this.cinemaInfo

      //4.获取场次信息
      let fieldInfo = info
      //5.封装所有信息
      let chooseSeatPageData = {
        poster,
        movieInfo,
        cinemaInfo,
        fieldInfo
      }
      //6.初始化vuex中数据
      this.$store.commit(this.mutationsTypes.EXCHANGE_CHOOSE_SEAT_PAGE_DATA, {})
      //7.保存到vuex中
      this.$store.commit(this.mutationsTypes.EXCHANGE_CHOOSE_SEAT_PAGE_DATA, chooseSeatPageData)
      //8.路由跳转
      this.$router.push({
        name: 'chooseSeat'
      })
    }
  },
}
</script>

<style scoped>
.cinema-brand-nav {
  margin-top: 50px;
}
</style>